<template>
  <div style="height: 100%; width: 100%">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else style="height: 100%; width: 100%">
      <div class="leftbigbox">
        <div class="zhibiao tip-container">
          <dv-border-box-8>
            <h2>各项指标</h2>
            <div class="qixiang box">
              <div class="griditem">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shidu"></use>
                </svg>
              </div>
              <div class="griditem">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-fengsu"></use>
                </svg>
              </div>
              <div class="griditem">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-yanwujiance_1"></use>
                </svg>
              </div>
              <div class="griditem">风速：</div>
              <div class="griditem">湿度：</div>
              <div class="griditem">烟雾浓度：</div>
              <div class="griditem">{{ qixiang.fengsu }}(m/s)</div>
              <div class="griditem">{{ qixiang.shidu }}(RH)</div>
              <div class="griditem">{{ qixiang.yanwu }}(PPM)</div>
            </div>
            <div class="huanjingchart box">
              <huanjing></huanjing>
            </div>
            <div class="tu box">
              <chanzhitongji></chanzhitongji>
            </div>
            <div class="tu box"><channengyuce></channengyuce></div>
          </dv-border-box-8>
        </div>
        <div class="tuopu tip-container" style="height: 18vh">
          <dv-border-box-8>
            <h2 class="shangbianju">拓扑图</h2>
            <img src="../assets/images/tuopu.png" alt="" />
          </dv-border-box-8>
        </div>
      </div>
      <div class="rightbigbox">
        <div class="rightbox">
          <div class="shexiang tip-container">
            <dv-border-box-8>
              <h2>警告事件列表</h2>
              <div class="databox">
                <tableyujing></tableyujing>
              </div>
            </dv-border-box-8>
          </div>
        </div>
        <div class="rightbox">
          <div class="shexiang tip-container">
            <dv-border-box-8>
              <h2>设备列表</h2>
              <div class="databox">
                <tableshebei></tableshebei>
              </div>
            </dv-border-box-8>
          </div>
        </div>
        <div class="rightbox">
          <div class="shexiang tip-container">
            <dv-border-box-8>
              <h2>监控列表</h2>
              <div class="databox">
                <tableV></tableV>
              </div>
            </dv-border-box-8>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
​​
<script>
import "../assets/js/iconfont";
import huanjing from "../components/zonghexinxi/huanjing.vue";
import chanzhitongji from "../components/zonghexinxi/chanzhitongji.vue";
import channengyuce from "../components/zonghexinxi/channengyuce.vue";
import tableV from "../components/zonghexinxi/tableV.vue";
import tableyujing from "../components/zonghexinxi/tableyujing.vue";
import Tableshebei from "../components/zonghexinxi/tableshebei.vue";
export default {
  data() {
    return {
      qixiang: "",
      loading: true,
    };
  },
  destroyed() {
    clearInterval(this.timeid);
  },
  methods: {
    //获取气象数据
    async getQixiang() {
      const res = await this.$http.get("/ai/huanjing");
      this.qixiang = res.data;
      this.loading = false;
    },
    //定时器
    startInterval() {
      this.timeid = setInterval(() => {
        this.getQixiang();
      }, 4000);
    },
  },
  mounted() {
    this.getQixiang();
    this.startInterval();
  },
  components: {
    huanjing,
    chanzhitongji,
    channengyuce,
    tableV,
    tableyujing,
    Tableshebei,
  },
};
</script>

<style lang="less" scoped>
//图标样式
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  color: #93c508;
  font-size: 2vw;
}
.leftbigbox {
  float: left;
  width: 17vw;
  height: 100%;
}
.tip-container {
  background-color: rgba(22, 31, 38, 0.3);
  // border-radius: 1vw;
}
.box {
  height: 15.64vh;
}
.zhibiao {
  .qixiang {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr 1.5fr 1.5fr;
    //网格元素居中
    justify-items: center;
    //上边距
    padding-top: 0.8vw;
    .griditem {
      font-size: 0.8vw;
      color: #f1f1f1;
      // line-height: 1.5vw;
    }
  }
  .huanjingchart {
    .huanjing {
      height: 100%;
      width: 100%;
    }
  }
}

.tuopu {
  margin-top: 0.5vw;
  text-align: center;
  img {
    height: 80%;
    width: 97%;
  }
}
.rightbigbox {
  float: right;
  width: 17vw;
  height: 100%;
  .rightbox {
    height: 33%;
  }
  .shexiang {
    height: 97%;
    width: 100%;
    overflow: hidden;
  }
}
.databox {
  height: 90%;
}
</style>

